2025

(10/7)

light box

img, vids, text, gif and multimedia can exist in a lightbox
gallery can be zoomed in or out
can be animated(slow fades in)


        <style>
        /* Style for the overlay */
        #lightbox {
          display: none;
          position: fixed;
          z-index: 9999;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.8);
          text-align: center;
        }
        #lightbox img {
          max-width: 90%;
          max-height: 80%;
          margin-top: 5%;
          border-radius: 4px;
        }
        #lightbox span {
          position: absolute;
          top: 20px;
          right: 35px;
          color: white;
          font-size: 40px;
          cursor: pointer;
          font-weight: bold;
        }
        </style>
        
        <!-- Thumbnail -->
        <img src="/Nyu Gallery/icon/skyfall-icon.png" alt="Full image" width="250" onclick="openLightbox('/Nyu Gallery/2019/skyfall.png')" style="cursor:pointer;">
        
        <!-- Overlay -->
        <div id="lightbox">
          <span onclick="closeLightbox()">×</span>
          <img id="lightbox-img" src="" alt="Full view">
        </div>
        
        <script>
        function openLightbox(url) {
          document.getElementById("lightbox").style.display = "block";
          document.getElementById("lightbox-img").src = url;
        }
        function closeLightbox() {
          document.getElementById("lightbox").style.display = "none";
        }
        </script>

10/8

“HTML escaping” or “HTML entity encoding.” view on MDN

It basically means converting special HTML characters like <;, >, and " into their safe text equivalents (<, >, ") so the browser displays them instead of interpreting them.

Neocities’ built-in editor: Find and Replace

When you’re editing a file, press Ctrl + F (or Cmd + F on Mac) to open the find bar at the bottom. Then click the “.*” icon or “Aa” toggle (depending on your browser) to switch to “Replace” mode — or just hit Ctrl + H (Cmd + H on Mac). That opens the replace field.
You can type > in the “Find” box and < in the “Replace” box, and hit Replace All. Do the same for < → > and " → ".
If Neocities’ online editor feels clunky, just download the file, open it in a real text editor like VS Code or Notepad++, do the replacements there, and re-upload. It’s way faster when you’ve got a lot of tags to escape.

10/12

Embed

embed

iframe src="https://example.com" width="800" height="600" /iframe

hotlinking (aka stealing by embedding XD)

img src="https://example.com/image.gif" alt="Description"

10/13

bullet list

First item
Second item
Third item

<ul> hi
<li>First item </li>
<li>Second item </li>
<li>Third item</li>
If you want numbered lists instead, you’d use <ol> instead of <ul >.)

First item
Second item
Third item

<ul> hi
<li>First item</li>
<li>Second item</li>
<li>Third item>/li>
(there is literally no limit to the bullet points XD. its only the matter of whether your pc or phone can handle it >:D)

line break(<br>tag)

First line
Second line
Third line
just add it at the end of the line you wanna skip
First line<br>
Second line<br>
Third line
(its basically outsourcing the skip function from enter key to this tag smh)

10/18/25

HTMl

HyperText Markup Languague is the standard markup language in web dev

markup language

XML and HTML are markup language

XML(X??? M???? L????)

Used for storing and transporting data in a structured format.

element

tells the browser how to display the content.
label pieces of content("this is a heading", "this is a paragraph", "this is a link", etc.)

title

title and /title indicates the websites tab title display and when user hovering their mouse over website tabs

empty element

does not have end tag
has no sematic meaning
line break (<br>) is an empty element

anchor tag (<a>)

embed link on text <a href "url here"> text </a>

10/19

element

tags are part of an element, not the same thing

10/20

10/28

Content Delivery Network(CDN)

a network of servers spread around the world that store and deliver your files
loads stored data from from the location closest to whoever’s viewing your site
can store images, videos, sound files or scripts.
makes your content load faster and reduces the strain on your main server
very common practice in the indutry for loading large or multiple medias, scripts
reduce website load and boosting it's perfomance

11/10

accordion (yes, that is what it's called😂) pt.1

a UI component
clicking a header or label expands or collapses content below it, while the header itself stays visible.

<button class="accordion">Section 1</button>
<div class="panel"> <p>Lorem ipsum...</p> </div>

class (attribute)

not to be confused with class in javascripts or object-oriented-programming
a label to an element to target (recognize) in css or javascripts
used to identify the element, communicates to the dev working on the elemnts(Good class names make it clear what the element does, instead of leaving someone guessing)

insert mode (aka insert key)

toggle between insert and overwrite mode
insert (normal) mode: add between letters (indicated by the blinking vertical line aka insertion point cursor aka caret in terminal → I )
overwrite mode: replace the letter above the letter (indicated by blinking underline aka block cursor → ▌ or _)
only works in text editor for coding. normal text box does not recognize that function when pressing insert key

11/11

Web dev Game👈😮

Flexbox Froggy
Grid Garden
CodeCombat

radio button

Disclosure widget(accordion EZ mode)

detail tags creates a disclosure widget or box thats available for drop down function.
summary tags show the primary text on top of drop down text. its sits inside the box you can click on

this is what summary tag shows ←

everything in the dropdown box is show here
(theres no animation for this one TwT, but it still work for now)

11/14

Ace Editor

web based code editor
program that use ace editor
- neocities
  - settings panel can be accessed by using ctrl + ,

bullet point nesting


          <ul>
        <li>Main item
          <ul>
            <li>Sub-item</li>
            <li>Another sub-item</li>
          </ul>
        </li>
      
        <li>Another main item</li>
      </ul>

11/15

New Tag Discovered: <input>!

can be used to make a basic search bar
possible attribute: id, type, placeholder

New Attributes Discovered!

id
???
type
???
placeholder
???

search bar

11/16

New tags discovered!

<div> - the content division element compatible attribute: Global(id, class,...), outdated attributes: align <nav>
??? <article>
???

new attributes discovered!

align
???